<template>
  <view class="card-wrapper">
    <scroll-view scroll-y style="height: 100%" @scrolltolower="onScrolltolower">
      <view class="card-item" v-for="(item, index) in ajaxData" :key="index">
        <view class="ali-center">
          <view class="card-item-image">
            <uv-image :src="item.imagePath || defaultPropImg" height="100%" width="100%"></uv-image>
          </view>
          <view class="card-item-content">
            <view class="name">{{ item.name }}</view>
            <view class="buttons">
              <view class="buttons-item">
                <button class="reset-button btn" @click="onClickPay(item)">购买记录</button>
              </view>
              <view class="buttons-item">
                <button class="reset-button btn" @click="onClickUsages(item)">使用记录</button>
              </view>
            </view>
            <view class="common">
              <view class="common-label">有效期</view>
              <view class="common-data common-date">{{ item.expiresStart }} 至 {{ item.expiresDate }}</view>
            </view>
            <view class="common">
              <view class="common-label">总数</view>
              <view class="common-data common-number">
                <text class="common-data-warning"> {{ item.totalRemain > 99999 ? '无上限' : item.totalRemain }}</text>
                / {{ item.totalFrequency > 99999 ? '无上限' : item.totalFrequency }}
              </view>
              (去卡豆)
            </view>
            <view class="common">
              <view class="common-label">本月可用</view>
              <view class="common-data common-number">
                <text class="common-data-info">{{ item.monthRemain > 99999 ? '无上限' : item.monthRemain }}</text>
              </view>
              (去卡豆)
            </view>
            <view class="common">
              <view class="common-label">道具ID</view>
              <view class="common-data">{{ item.id }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view v-if="!ajaxData.length" class="empty-txt">---暂无数据---</view>
  </view>

  <view class="screen" :class="{ screenShow: dialogPay.show }">
    <view class="screen-content">
      <view class="content">
        <view class="close">
          <uv-icon name="close" color="#fff" size="35rpx" @click="closeDialog"></uv-icon>
        </view>
        <view class="title">购买记录</view>
        <view class="purchase-item" v-for="(item, index) in dialogPay.val" :key="index">
          <view class="mb-4">
            <text class="mr-15">购买时间</text>
            <text>{{ item.CreatedAt }}</text>
          </view>
          <view>
            <text class="mr-15">购买类型</text>
            <text>{{ item.purchaseType }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="screen" :class="{ screenShow: dialogUsages.show }">
    <view class="screen-content">
      <view class="content">
        <view class="close">
          <uv-icon name="close" color="#fff" size="35rpx" @click="closeDialog"></uv-icon>
        </view>
        <view class="title">使用记录</view>
        <view class="usage-item" v-for="(item, index) in dialogUsages.val" :key="index">
          <view class="introduce">
            <view class="name">{{ item.lessonName }}</view>
            <view class="detail" @click="onGoDetail(item)">课程详情</view>
          </view>
          <view class="time">{{ item.time }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import { ref, reactive } from 'vue';
  import { defaultPropImg } from '@/common/js/global.js';
  let ajaxData = ref([]);
  let params = ref({
    pageSize: 10,
    currentPage: 1
  });
  const httpList = async () => {
    let res = await uni.$uv.http.post('app/package_offer/mine', params.value);
    ajaxData.value = res;
  };
  httpList();
  const onPay = val => {
    uni.$uv.route({
      url: '/pages/prop/pay',
      params: {
        id: val.id
      }
    });
  };
  // 购买记录
  let dialogPay = ref({
    show: false,
    val: []
  });
  const onClickPay = async ({ id }) => {
    let data = await uni.$uv.http.post('app/package_offer/purchase_records', { id });
    dialogPay.value.show = true;
    dialogPay.value.val = data.map(r => {
      return { ...r, CreatedAt: dayjs(r.CreatedAt).format('YYYY-MM-DD HH:mm') };
    });
  };
  let dialogUsages = ref({
    show: false,
    val: []
  });
  const onClickUsages = async ({ id }) => {
    let data = await uni.$uv.http.post('app/package_offer/consume_records', { id });
    dialogUsages.value.show = true;
    dialogUsages.value.val = data.map(r => {
      return { ...r, time: dayjs(r.CreatedAt).format('YYYY-MM-DD HH:mm') };
    });
  };
  const closeDialog = () => {
    dialogPay.value.show = false;
    dialogUsages.value.show = false;
  };
  // 前往课程详情
  const onGoDetail = val => {
    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: val.timetableID
      }
    });
  };
</script>

<style lang="scss" scoped>
  .mr-15 {
    margin-right: 26rpx;
  }

  .mb-4 {
    margin-bottom: 7rpx;
  }

  .ali-center {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .card-wrapper {
    padding: 26rpx 10rpx 0;
    height: 100%;
    .card-item {
      padding: 44rpx 0;
      margin-bottom: 26rpx;
      color: #b1b1b1;
      border-bottom: 1px dashed #b1b1b1;
      display: flex;
      &-image {
        overflow: hidden;
        width: 262rpx;
        height: 326rpx;
        border-radius: 19rpx;
        background-color: #c4c4c4;
      }
      &-content {
        flex: 1;
        margin-left: 21rpx;
        .name {
          font-size: 35rpx;
          color: #fff;
          font-weight: bold;
        }
        .buttons {
          margin-top: 35rpx;
          margin-bottom: 26rpx;
          display: flex;
          &-item {
            flex: 1;
          }
          .btn {
            width: 136rpx;
            height: 58rpx;
            line-height: 58rpx;
            text-align: center;
            border-radius: 30rpx;
            background-color: #545454;
            box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
            color: #fff;
            font-size: 24rpx;
            margin: 0;
          }
        }
        .common {
          margin-top: 7rpx;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          &-label {
            width: 105rpx;
          }
          &-data {
            font-size: 26rpx;
            &-warning {
              color: #ff7a66;
            }
            &-info {
              color: #ffcb68;
            }
          }
          &-date {
            font-size: 21rpx;
          }
          &-number {
            flex: 1;
            white-space: nowrap;
          }
        }
      }
    }
    .empty-txt {
      color: #cecece;
      text-align: center;
      margin-top: 20rpx;
    }
  }
</style>

<style lang="scss" scoped>
  .screen {
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    transform: translate(0%, -100%);
    z-index: 2024;
    opacity: 1;
    position: fixed;
    display: flex;
    flex-direction: column;
    inset: 0px;
    justify-content: center;
    align-items: center;
    transition: opacity 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;

    &-content {
      width: 516rpx;
      height: 984rpx;
    }
    .content {
      font-size: 24rpx;
      color: #fff;
      background-color: #545454;
      width: 100%;
      box-sizing: border-box;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 59rpx 66rpx 96rpx;
      border-radius: 19rpx;
      position: relative;
      .close {
        position: absolute;
        top: 35rpx;
        right: 35rpx;
      }
      .title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 44rpx;
      }
      .purchase-item {
        margin-bottom: 35rpx;
      }
      .usage-item {
        margin-bottom: 9rpx;
        .introduce {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5rpx;
          .detail {
            font-size: 19rpx;
            color: #ffaf16;
          }
        }
        .time {
          color: #959595;
          margin-left: 49rpx;
        }
      }
    }
  }

  .screenShow {
    transform: translate(0%, 0%);
  }
</style>
